<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline']});

   
    function initialize() {
      // Query our data source URL.
      var query = new google.visualization.Query('https://spreadsheets0.google.com/tq?key=0AvqG-02OdbLbdGVqSmVMWThBc2lNUVRyV1l2V3lkNUE&gid=6&headers=1');
   
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      // Called when the query response is returned.
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      //Take the data from the response
      var data = response.getDataTable();
      //The source data has the following columns:
      //Date | Hour | Number of mentions
      //But the Annotated Time Line visualization takes the following format:
      //Date or Datetime | Number | Title (optional) | Description (optional)
      //So let's addapt our data!
      data = addDatetimeColumn(data);
      drawVisualization(data);

}
    //This function adds a new column in which the date and hour data are merged
    function addDatetimeColumn(data) {
      var index = 2;
      data.insertColumn(index, "datetime");
      var formatter = new google.visualization.PatternFormat('{0},{1}');
      formatter.format(data, [0, 1], index); // Apply formatter and set the formatted value of the first column.    }
      //Now the Date and hour are in the same column.
      // transform it to the Date type
      var value;
      var slices, date;
      var datetime;
      for (i = 0;i<data.getNumberOfRows();i++){
        value=data.getFormattedValue(i,index);
        slices = value.split(","); //slices = [date,time]
        date = slices[0].split("/"); //date = [Y, m, d]
        //Date(Y,m,d,h)
        datetime = new Date(date[2],parseInt(date[0])-1,date[1],slices[1]);
        
        data.setCell(i,index, datetime);
        }
          
      data.removeColumn(1);
      data.removeColumn(0);
      return data;
    }
    
    function drawVisualization(data) {
      
      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('visualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    }
    
    google.setOnLoadCallback(initialize);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 1200px; height: 800px;"></div>
</body>
</html>
